/*
 * Copyright (c) 2024 unknowIfGuestInDream.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 * notice, this list of conditions and the following disclaimer in the
 * documentation and/or other materials provided with the distribution.
 *     * Neither the name of unknowIfGuestInDream, any associated website, nor the
 * names of its contributors may be used to endorse or promote products
 * derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL UNKNOWIFGUESTINDREAM BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.emoji-popup > .content {
    -fx-background-color: white;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, .2), 10.0, 0.5, 2.0, 2.0);
}

/** Top Panel **/
.emoji-popup > .content > .content-node > .top-box > .emoji-toggle {
    -fx-padding: 0.8em 0;
    -fx-min-width: 10px;
    -fx-background-radius: 0;
    -fx-background-color: white;
    -fx-border-width: 0;
    -fx-max-width: infinity;
    -fx-effect: null;
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle:selected,
.emoji-popup > .content > .content-node > .top-box > .emoji-toggle:hover,
.emoji-popup > .content > .content-node > .top-box > .emoji-toggle:selected:hover {
    -fx-background-color: black, white;
    -fx-background-insets: 0 0 0 0, 0 0 2 0;
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic {
    -fx-background-color: grey;
    -fx-min-width: 16px;
    -fx-pref-width: 16px;
    -fx-max-width: 16px;
    -fx-min-height: 16px;
    -fx-pref-height: 16px;
    -fx-max-height: 16px;
    -fx-scale-shape: false;
    -fx-scale-x: 0.038;
    -fx-scale-y: 0.038;
}

/**
 * The following set of SVGs are from Font Awesome - https://fontawesome.com
 */
.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-symbol {
    -fx-shape: "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-animal-symbol {
    -fx-shape: "M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.09-.14 84.15-2.53 125.96-7.36 53.48-5.44 97.02-26.47 132.58-56.54H255.74l146.79-48.88c11.25-14.89 21.37-30.71 30.45-47.12h-81.14l106.54-53.21C500.29 132.86 510.19 26.26 512 0z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-food-symbol {
    -fx-shape: "M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-activity-symbol {
    -fx-shape: "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zm-48 0l-.003-.282-26.064 22.741-62.679-58.5 16.454-84.355 34.303 3.072c-24.889-34.216-60.004-60.089-100.709-73.141l13.651 31.939L256 139l-74.953-41.525 13.651-31.939c-40.631 13.028-75.78 38.87-100.709 73.141l34.565-3.073 16.192 84.355-62.678 58.5-26.064-22.741-.003.282c0 43.015 13.497 83.952 38.472 117.991l7.704-33.897 85.138 10.447 36.301 77.826-29.902 17.786c40.202 13.122 84.29 13.148 124.572 0l-29.902-17.786 36.301-77.826 85.138-10.447 7.704 33.897C442.503 339.952 456 299.015 456 256zm-248.102 69.571l-29.894-91.312L256 177.732l77.996 56.527-29.622 91.312h-96.476z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-travel-symbol {
    -fx-shape: "M624 448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h608c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM80.55 341.27c6.28 6.84 15.1 10.72 24.33 10.71l130.54-.18a65.62 65.62 0 0 0 29.64-7.12l290.96-147.65c26.74-13.57 50.71-32.94 67.02-58.31 18.31-28.48 20.3-49.09 13.07-63.65-7.21-14.57-24.74-25.27-58.25-27.45-29.85-1.94-59.54 5.92-86.28 19.48l-98.51 49.99-218.7-82.06a17.799 17.799 0 0 0-18-1.11L90.62 67.29c-10.67 5.41-13.25 19.65-5.17 28.53l156.22 98.1-103.21 52.38-72.35-36.47a17.804 17.804 0 0 0-16.07.02L9.91 230.22c-10.44 5.3-13.19 19.12-5.57 28.08l76.21 82.97z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-object-symbol {
    -fx-shape: "M272 428v28c0 10.449-6.68 19.334-16 22.629V488c0 13.255-10.745 24-24 24h-80c-13.255 0-24-10.745-24-24v-9.371c-9.32-3.295-16-12.18-16-22.629v-28c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12zM128 176c0-35.29 28.71-64 64-64 8.837 0 16-7.164 16-16s-7.163-16-16-16c-52.935 0-96 43.065-96 96 0 8.836 7.164 16 16 16s16-7.164 16-16zm64-128c70.734 0 128 57.254 128 128 0 77.602-37.383 60.477-80.98 160h-94.04C101.318 236.33 64 253.869 64 176c0-70.735 57.254-128 128-128m0-48C94.805 0 16 78.803 16 176c0 101.731 51.697 91.541 90.516 192.674 3.55 9.249 12.47 15.326 22.376 15.326h126.215c9.906 0 18.826-6.078 22.376-15.326C316.303 267.541 368 277.731 368 176 368 78.803 289.195 0 192 0z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-symbol-symbol {
    -fx-shape: "M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z";
}

.emoji-popup > .content > .content-node > .top-box > .emoji-toggle > .graphic.emoji-flag-symbol {
    -fx-shape: "M336.174 80c-49.132 0-93.305-32-161.913-32-31.301 0-58.303 6.482-80.721 15.168a48.04 48.04 0 0 0 2.142-20.727C93.067 19.575 74.167 1.594 51.201.104 23.242-1.71 0 20.431 0 48c0 17.764 9.657 33.262 24 41.562V496c0 8.837 7.163 16 16 16h16c8.837 0 16-7.163 16-16v-83.443C109.869 395.28 143.259 384 199.826 384c49.132 0 93.305 32 161.913 32 58.479 0 101.972-22.617 128.548-39.981C503.846 367.161 512 352.051 512 335.855V95.937c0-34.459-35.264-57.768-66.904-44.117C409.193 67.309 371.641 80 336.174 80zM464 336c-21.783 15.412-60.824 32-102.261 32-59.945 0-102.002-32-161.913-32-43.361 0-96.379 9.403-127.826 24V128c21.784-15.412 60.824-32 102.261-32 59.945 0 102.002 32 161.913 32 43.271 0 96.32-17.366 127.826-32v240z";
}

/** Emoji Panel Content **/
.emoji-popup > .content > .content-node > .emoji-panel {
    -fx-min-width: 335px;
    -fx-pref-width: 335px;
    -fx-max-width: 335px;
    -fx-min-height: 300px;
    -fx-max-height: 300px;
    -fx-background-color: white;
}

.emoji-popup > .content > .content-node > .emoji-panel > .header {
    -fx-padding: 0.50em;
    -fx-spacing: 0.50em;
}

.emoji-popup > .content > .content-node > .emoji-panel > .header > .text-field {
    -fx-padding: 0.50em 0.75em;
    -fx-background-radius: 2em;
}

.emoji-popup > .content > .content-node > .emoji-panel > .header > .header-label {
    -fx-font-weight: bold;
    -fx-font-family: "Roboto";
}

/* Get rid of focus rect in scroll pane and list view */
.emoji-popup > .content > .content-node > .emoji-panel > .scroll-pane,
.emoji-popup > .content > .content-node > .emoji-panel > .scroll-pane:focused {
    -fx-background-insets: 0;
}

/* Get rid of background color */
.emoji-popup > .content > .content-node > .emoji-panel > .scroll-pane,
.emoji-popup > .content > .content-node > .emoji-panel > .scroll-pane > .viewport {
    -fx-background-color: null;
}

.emoji-popup > .content > .content-node > .emoji-panel .emoji-container {
    -fx-padding: 0 1.5em 0 0;
}

.emoji-popup > .content > .content-node > .emoji-panel .emoji-container > .emoji {
    -fx-padding: 0.50em;
}

.emoji-popup > .content > .content-node > .emoji-panel .emoji-container > .emoji:hover {
    -fx-background-color: rgba(150, 200, 200, 0.25);
    -fx-background-radius: 0.75em;
}

/** Centers the Emoji in the background **/
.emoji-popup > .content > .content-node > .emoji-panel .emoji-container > .emoji > .image-view {
    -fx-translate-x: -1.0;
    -fx-translate-y: -1.0;
}

/**
 * ScrollBar styling. Remove increment/decrement buttons
 */
.emoji-popup > .content > .content-node .scroll-bar .increment-arrow,
.emoji-popup > .content > .content-node .scroll-bar .decrement-arrow {
    -fx-shape: " ";
    -fx-padding: 0;
    -fx-background-color: transparent;
    -fx-background-radius: 0em;
}

.emoji-popup > .content > .content-node .scroll-bar:vertical .increment-button,
.emoji-popup > .content > .content-node .scroll-bar:vertical .decrement-button {
    -fx-padding: 0 10 0 0;
}

.emoji-popup > .content > .content-node .scroll-bar:horizontal .increment-button,
.emoji-popup > .content > .content-nodep .scroll-bar:horizontal .decrement-button {
    -fx-padding: 0 0 10;
}

.emoji-popup > .content > .content-node .scroll-bar:horizontal .track,
.emoji-popup > .content > .content-node .scroll-bar:vertical .track {
    -fx-background-color: #d6d6d6;
    -fx-border-color: transparent;
    -fx-background-radius: 0em;
}

.emoji-popup > .content > .content-node .scroll-bar:horizontal .thumb,
.emoji-popup > .content > .content-node .scroll-bar:vertical .thumb {
    -fx-background-color: derive(black, 90%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 2em;
}

/** Hover Panel **/
.emoji-popup > .content > .content-node > .emoji-panel > .foot-box {
    -fx-alignment: center;
    -fx-background-color: grey, white;
    -fx-background-insets: 0 0 0 0, 0.5 0 0 0;
    -fx-padding: 1.0em;
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .hover-panel {
    -fx-spacing: 0.5em;
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .hover-panel > .image-pane {
    -fx-pref-height: 32px;
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .hover-panel > .labels > .label {
    -fx-font-family: "Roboto";
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .hover-panel > .labels > .name {
    -fx-font-weight: bold;
    -fx-font-size: 0.933em;
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .hover-panel > .labels > .code-name {
    -fx-font-size: 0.9em;
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .skin-button {
    -fx-background-color: white;
    -fx-background-radius: 10px;
    -fx-padding: 4;
    -fx-alignment: CENTER;
}

.emoji-popup > .content > .content-node > .emoji-panel > .foot-box > .skin-button:hover {
    -fx-background-color: rgba(150, 200, 200, 0.25);
}

/** Popup for skin tones **/
.popup-box {
    -fx-alignment: center;
    -fx-spacing: 1;
}

.popup-box > .item {
    -fx-background-color: white;
    -fx-background-radius: 10px;
    -fx-padding: 4;
    -fx-alignment: CENTER;
}

.popup-box > .item:selected {
    -fx-background-color: rgba(150, 200, 200, 0.5);
}

.popup-box > .item:hover {
    -fx-background-color: rgba(150, 200, 200, 0.25);
}
